<template>
    <div class="appMainWarp">
        <div class="postListManagement">
            <!--寄送清单管理 -->
            <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline"
                size="small"
                label-width="120px"
                ref="formData"
            >
                <el-row>
                    <el-col class="text_left itemNoMargBtm">
                        <el-form-item label="手机号">
                            <el-input v-model="formData.phone" placeholder="请输入要查询的手机号码"></el-input>
                        </el-form-item>
                        <el-form-item label="收件人姓名">
                            <el-input v-model="formData.recipient" placeholder="请输入要查询的收件人姓名"></el-input>
                        </el-form-item>
                        <div class="inlineBtn">
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-search"
                                @click="getInitData"
                                class="searchBtn"
                            >查询</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-refresh-right"
                                @click="handleReset"
                                class="resetBtn"
                            >重置</el-button>
                            <el-button type="primary" size="small" @click="clickImport">寄送清单导入</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-download"
                                @click="downloadFile"
                            >点击下载寄送清单模板</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div class="text_center">
                <template>
                    <el-table
                        :data="tableData"
                        border
                        stripe
                        style="width:100%"
                        class="el-table heard-bg"
                    >
                        <el-table-column :label="tableTitle">
                            <template v-for="item in tablecolumn">
                                <el-table-column
                                    :label="item.label"
                                    :prop="item.prop"
                                    :key="item.label"
                                ></el-table-column>
                            </template>
                        </el-table-column>
                    </el-table>
                    <Pagination
                        :hanleChangeCurrentPage="hanleChangeCurrentPage"
                        :handleChangeSize="handleChangeSize"
                        :currentPage="currentPage"
                        :pageSize="pageSize"
                        :total="total"
                    />
                </template>
            </div>
        </div>
        <el-dialog
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
            @close="cancelClick"
        >
            <div slot="title">寄送清单导入</div>
            <YsUpload ref="YsUpload" :actionUrl="actionUrl" @getInitData="getInitData"></YsUpload>

            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="cancelClick"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="handleImport"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import QualityTestingEchart from '@/views/home/qualityTesting/QualityTestingEchart.vue';
import YsUpload from '@/components/YsUpload/YsUpload.vue';
import request from '@/apis/request';

export default {
    name: 'postListManagement',
    components: { Pagination, QualityTestingEchart, YsUpload },
    data() {
        return {
            formData: {
                phone: '',
                recipient: '',
            },
            tableTitle: '',
            tableData: [],
            Show: false,
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tablecolumn: [
                { label: '卡号', prop: 'cardNo', flag: true },
                { label: '收件人姓名', prop: 'recipient', flag: true },
                { label: '手机号码', prop: 'phone', flag: true },
                { label: '投递时间', prop: 'mailingTime', flag: true },
                { label: '寄送单号', prop: 'mailingNumber', flag: true },
            ],
            formDataGroup: {
                month: '',
            },
            actionUrl: '/iccsrv/mailing/importMailingList',

        }
    },
    mounted() {
        this.getInitData();
    },
    methods: {
        //查询
        // 获取当月月份数据
        getInitData(value) {
            // console.log('获取当月月份数据', this.formData.month);
            let params = {};
            if (value == '2') {
                params = {
                    phone: this.formData.phone,
                    recipient: this.formData.recipient,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                };
            } else {
                params = {
                    phone: this.formData.phone,
                    recipient: this.formData.recipient,
                    pageNum: 1,
                    pageSize: 10,
                };
            }

            this.$post.postInfo.getPostList(params).then((res) => {
                console.log("寄送清单查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.total = res.data.content.total;
                        this.tableData = res.data.content.records;
                    }
                }
            });
        },

        // 点击导入
        clickImport() {
            this.Show = true;
        },
        // 导入点击确定按钮
        handleImport() {
            this.$refs.YsUpload.submitupload();
        },
        // 取消
        cancelClick() {
            this.$refs.YsUpload.clearFilesFun();
            this.Show = false;
        },
        // 下载按钮
        downloadFile() {
            // this.$post.information.importStaff().then((res) => {
            //     // console.log(res, '相应报文')
            //     const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
            //     const a = document.createElement('a');
            //     a.style.display = 'none';
            //     a.download = 'custLabelTemplate.xlsx';
            //     a.href = blobUrl;
            //     document.body.appendChild(a);
            //     a.click();
            //     document.body.removeChild(a);
            // });

            const url = '/iccsrv/mailing/mailingListExport';
            request({
                url,
                method: 'get',
                responseType: 'blob',
                params: 'postListTemplate.xlsx',
            }).then((res) => {
                const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
                const a = document.createElement('a');
                a.style.display = 'none';
                a.download = 'postListTemplate.xlsx';
                a.href = blobUrl;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            console.log('this.currentPage', val);
            this.currentPage = val;
            this.getInitData('2');
            this.tableData = [];
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            console.log('pageSize', val);
            this.pageSize = val;
            this.getInitData('2');
            this.tableData = [];
            console.log('this.pageSize', this.pageSize);
        },
        // 重置
        handleReset() {
            this.formData.phone = '',
                this.formData.recipient = '',
                this.tableData = [];
        },

    },
}
</script>
<style lang="scss" >
.postListManagement {
    .el-tabs--border-card {
        box-shadow: none;
        border: none;
    }
}
</style>
<style  scoped lang="scss">
.appMainWarp {
    /* padding: 10px; */
    .demo_blok {
        border: 12px solid #ebebeb;
        border-radius: 3px;
        transition: 0.2s;
        height: 100%;
    }

    .postListManagement {
        margin-top: 15px;
        height: 80%;
        text-align: left;
        .text_center {
            width: 97%;
            margin: 0 auto;
            padding-bottom: 20px;
        }
        .el-table {
            margin-top: 10px;
        }
        .el-tabs__content {
            height: 80vh;
        }
    }
}
</style>